import React, { PureComponent } from 'react'
// 引入 ECharts 主模块
import echarts from 'echarts'
import '../../util/china'
import baseChart from '../chart/base-chart'
import { setTitle, scale } from '../chart/util/common'
class ChinaMap extends PureComponent {
    constructor () {
        super()
    }

    componentDidMount () {
        const {setChartInstance, openDetail, data} = this.props
        const myChart = setChartInstance(echarts.init(this.refs.chart))

        myChart.on('click', function (params) {
            if (params.seriesType === 'scatter' && params.data.name != '统合' && params.data.name != '飞旭') {
                openDetail(params)
            }
        })
        myChart.setOption({
            title: {
                text: 'H3C主要外包生产厂家及分布',
                left: '8%',
                top: '8%',
                textStyle: {
                    color: '#fff',
                    fontSize: scale * 20
                }
            },
            geo: {
                map: 'china',
                center: [120, 28],
                zoom: 3,
                label: {
                    emphasis: {
                        show: false
                    }
                },
                itemStyle: {
                    normal: {
                        areaColor: '#00C3FF',
                        borderColor: '#006699',
                        borderWidth: 0.5 * scale
                    },
                    emphasis: {
                        areaColor: '#00C3FF',
                        borderColor: '#006699',
                        borderWidth: 0.5 * scale
                    }
                },
            },
            series: [
                {
                    name: '地点',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    zlevel: 2,
                    effectType: 'none',
                    rippleEffect: {
                        brushType: 'stroke'
                    },
                    label: {
                        normal: {
                            show: false,
                            position: 'right',
                            formatter: '{b}'
                        }
                    },
                    symbolSize: function (val) {
                        return 72 * scale
                    },
                    // symbol:`path://M4018.16982 287.19918c-214.206672 43.374105-212.310372 165.249017-209.932472 222.529323-0.22575 66.460807 3.6722 128.105613 109.172711 193.12162 109.308161 75.566058 457.625398 20.994752 457.625398 20.994753v96.56081c-16.314202 2.90465-492.436051 46.113205-684.353671-54.586356-196.869071-119.286312-135.419914-326.720484-130.152414-344.253736 5.297601-17.548302 47.723555-165.926267 247.707976-201.534571 247.241426-46.384105 571.01211-12.596851 571.01211-12.596851V304.010032c-121.077263-37.068154-361.079638-16.810852-361.079638-16.810852z m-545.788307 281.284529c60.365556 67.348757 17.879402 196.14667-109.172712 230.927225s-314.680483 44.532955-638.165216 20.994752v-92.36186s342.688536 49.529555 453.426447 16.780752c110.752962-32.718703 110.497112-147.565265 37.790554-176.340869-64.775207-31.574903-112.062312-33.561504-230.912174-33.561503h-172.141918v-75.581108s289.03528 7.540051 340.084885-12.596851c51.049605-20.151952 80.562658-43.163405 79.780059-92.37691-0.76755-49.198455-28.865903-66.536057-83.963959-75.566058-55.083006-9.030001-302.625432-6.787551-411.451993 21.009802h-4.19895v-92.361859s384.90379-30.611703 558.415258 4.19895c208.668272 10.760751 280.125679 219.308623-16.795802 281.29958-0.04515-0.01505 136.939964 8.217301 197.305521 75.535957z m-1037.050459-29.377603h-373.676489V833.017587h-218.315322V194.83732h218.315322v264.503778h373.676489V194.83732h218.315323V833.017587h-218.315323V539.106106z`,

                    tooltip: {
                        trigger: 'item',
                        formatter: function (params) {
                            return `${params.data.num}`
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#F58158'
                        }
                    },
                    data: data
                }
            ]
        })
    }

    render () {
        return (
            <div className="company-chart" ref="chart"/>
        )
    }

}

export default baseChart(ChinaMap)